<template>
   <div class="candyTask">
     <!-- 头部大图 -->
     <topImg></topImg>
     <!-- 主题区域 -->
     <div class="mainContent front-color">
       <!-- 小计 -->
       <total :total = "homeTotal"></total>
       <!-- 列表 -->
       <taskList
         v-if="!isShowTaskDetail"
         :candyTaskList="candyTaskList"
         :candyTaskListLeng="candyTaskListLeng"
         :userinfo="userinfo"
         :isShowLoad="showLoad"
         @showTaskDetail="showTaskDetail"
         @reGetTaskList="reGetTaskList">
       </taskList>
       <!-- 任务明细 -->
       <candyReward
         v-else="isShowTaskDetail"
         @hideTaskDetail="hideTaskDetail"
         :showArr="showArr">
       </candyReward>
     </div>
   </div>
</template>

<script>
import { mapState } from 'vuex'
import topImg from './candyTask/topImg'
import total from './candyTask/total'
import taskList from './candyTask/taskList'
import candyReward from './candyTask/candyReward'
export default {
  name: 'candyTask',
  components: {
    topImg,
    total,
    taskList,
    candyReward
  },
  data () {
    return {
      homeTotal: {
        alreadyGetCount: null, // 总糖果折合USDT
        notReadyGetCount: null, // 折合USDT待领取
        todayGetCount: null // 今日已领取折合
      },
      candyTaskList: [],
      showLoad: true,
      isShowTaskDetail: false,
      showArr: []
    }
  },
  computed: {
    ...mapState({
      userinfo ({baseData: {_user}}) {
        return _user || {}
      }
    }),
    candyTaskListLeng () {
      return this.candyTaskList.length
    }
  },
  mounted () {
    this.ajax()
  },
  watch: {
    '$store.state.baseData._lan' (newVal, oldVal) {
      if (newVal) {
        if (this.isShowTaskDetail) {
          this.taskDetailAjax()
        } else {
          this.ajax()
        }
      }
    }
  },
  methods: {
    // 糖果首页ajax
    ajax () {
      this.showLoad = true
      this.axios({
        method: 'post',
        url: this.$store.state.url.user.candy_task,
        headers: {}
      }).then((res) => {
        if (res.code === '0') {
          this.candyTaskList = []
          res = res.data
          this.homeTotal.alreadyGetCount = res.alreadyGetCount
          this.homeTotal.notReadyGetCount = res.notReadyGetCount
          this.homeTotal.todayGetCount = res.todayGetCount
          res.list.forEach((item, index) => {
            let obj = {}
            obj.activeType = item.activeType
            obj.activeTypeName = item.activeTypeName
            obj.title = item.title
            obj.id = item.id
            obj.regulation = item.regulation
            obj.countCoin = item.countCoin
            obj.getStatus = item.getStatus // 0未完成 1已完成 针对注册：0已领取 1待领取 2已过期 3已领完 4已结束 5已完成（老用户未参与活动）
            obj.bool = false
            this.candyTaskList.push(obj)
          })
          this.showLoad = false
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    reGetTaskList () {
      this.ajax()
    },
    // 展示任务明细
    showTaskDetail () {
      this.isShowTaskDetail = true
      this.taskDetailAjax()
    },
    // 隐藏任务明细
    hideTaskDetail () {
      this.isShowTaskDetail = false
    },
    // 任务明细
    taskDetailAjax () {
      const _self = this
      this.axios({
        method: 'post',
        url: this.$store.state.url.user.candy_reward_detail,
        headers: {}
      }).then((res) => {
        if (res.code === '0') {
          this.showArr = []
          res = res.data.list
          res.forEach((item, index) => {
            let obj = {}
            let indexs = Math.floor(index / 10)
            !this.showArr[indexs] && (this.showArr[indexs] = [])
            obj.ftime = item.ftime
            obj.countCoin = item.countCoin
            obj.title = item.title
            obj.status = item.status
            _self.showArr[indexs].push(obj)
          })
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>
